<template>
    <div ref="chartDom" id="trend-chart"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import {historyWarning} from "@/cesiumTools/echartsOpts";
import { historyWarningData } from "@/store/staticData";
const chartDom = ref(null);

onMounted(() => {
    const chart = initChart();
});

const initChart = () => {
    const chart = echarts.init(chartDom.value);
    chart.setOption(historyWarning(historyWarningData));
    return chart;
};
</script>

<style scoped>
#trend-chart {
    width: 500px;
    height: 230px;
    margin: 0 auto;
}
</style>
